.theme-palette {
    /*position: absolute;*/
    /*top: 10px;*/
    /*right: -10px;*/
    background: white;
    border-radius: 10px;
    box-shadow: -10px -5px 12px -4px rgba(0, 0, 0, 0.1), 5px 5px 0 0 rgba(0, 0, 0, 0.05);
    padding: 8px;
    width: 136px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    display: grid;
    animation: fadeIn 0.3s ease;
    gap: 10px;
    overflow: hidden;
    margin-top: 10px;
}

.theme-color {
    width: 120px;
    height: 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
    border: 2px solid transparent;

    /*border-radius: 10px;*/
    /*overflow: hidden;*/
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);*/
    /*transition: transform 0.3s ease;*/
}

.theme-color:hover {
    transform: translateY(-5px);
}

.theme-color.active {
    border: 4px solid green;
    box-shadow: 0 0 0 2px #e8f5e9;
}

.theme-color.white {
    background: rgba(0, 0, 0, 0.1);
}

.theme-color.black {
    background: #2a2a2b;
}

.theme-color.blue {
    background: var(--layout-bg-color-1);
}

.theme-color.orange {
    background: var(--layout-bg-color-2);
}

.theme-color.purple {
    background: var(--layout-bg-color-3);
}

.theme-color.green {
    background: var(--layout-bg-color-4);
}

.theme-color.red {
    background: var(--layout-bg-color-5);
}

.theme-color.pink {
    background: var(--layout-bg-color-6);
}

.theme-color.cyan {
    background: var(--layout-bg-color-7);
}

.theme-color.deep-purple {
    background: var(--layout-bg-color-8);
}

.theme-color.brown {
    background: var(--layout-bg-color-9);
}
